<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>aLeX^rS</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="js/accordian.ars-1.0.js"></script>
</head>
<body>
	<style type="text/css" media="all">
		
	body
	{
		font:14px "Trebuchet MS";
		color:#444;
		line-height:1.87em;
	}
	
	body > div
	{
		margin:2em;
		padding:2em;
		
	}
	
	div.accordian
	{
		float:left;
		margin:15px;
	}
	
	#myaccordian
	{
		width:200px;
	}
		
	
	</style>
	<style type="text/css" media="all">
		/*
		 *	Accordian Base Styles!
		 *
		 */
		
		.toggler
		{
			color:blue;
			font-size:11px;
		}
		
		ul.accordian
		{
			list-style: none;
			margin:0px;
			padding:0px;
			background-color:rgb(250,250,250);
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border:1px solid rgb(225,225,225);
			box-shadow: 0px 0px 15px rgb(210,210,210);
			font:13px "Arial";
			margin-bottom:3em;
		}
		
		ul.accordian li.item
		{
			list-style: none;
			border:1px solid rgb(240,240,240);
			box-shadow: 0px 0px 10px rgb(240,240,240) ;		
		}
		
		
		ul.accordian li.item:first-of-type
		{
			border-top:0px;
		}
		
		ul.accordian li.item:last-of-type
		{
			border-bottom:0px;
		}
		
		
		
		ul.accordian li.item .label
		{
			font-size:11px;
			font-weight:500;
			background-color:rgb(240,240,240);
			color:black;
			box-shadow: 0px 2px 15px rgb(200,200,200) ;
			border-top:1px solid rgb(240,240,240);
			border-bottom:1px solid rgb(240,240,240);
			padding:.5em;
			text-align: center;
		}
		
		ul.accordian li.item .contents
		{
			
			filter:alpha(opacity=100);
			opacity: 1;
			-moz-opacity: 1;
			padding-right:.5em;
			padding-left:.5em;
		}
		
	</style>
	<div>
		
		<div class="accordian">
			<div id="myaccordian-status" ></div>
			<ul id="myaccordian" class="accordian">
				<li>
					<div class="label">Item One</div>
					<div class="contents">the contents4</div>
				</li>
				<li>
					<div class="label">Item Two</div>
					<div class="contents">the <br />contents5</div>
				</li>
				<li class="default">
					<div class="label">Item Three - Open by Default</div>
					<div class="contents">the contents6</div>
				</li>
				<li>
					<div class="label">Item Four</div>
					<div class="contents">the <br />contents7</div>
				</li>
			</ul>
		</div>
				
		
	</div>
	
	
	<script type="text/javascript">
				
		
		// start accordians...
		$(function()
		{

			$('#myaccordian').each( function(){
				AccordianWidget( $(this), {
						togglerlabel: 'Show/Hide',
						behaviour: 'click'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian-status').text('item \'' + label + '\' was shown...');
						}
					} );				
			} );
			
			
		});
		
		
	</script>
</body>
</html>